<template>
<view class="page-wrap">
  <u-sticky :h5-nav-height="0" bg-color="transparent">
    <view class="sticky-bg">
      <u-navbar title-bold
                :is-fixed="false"
                :titleSize="34"
                :is-back="false"
                :border-bottom="false"
                :background="{background:'transparent'}"
                title-color="#2F3033"
      >
        <template v-slot:left>
          <view class="back-wrap" @click="back()">
            <image src="/yixu/static/images/dynamic_code/back.png"></image>
            <text>二维码</text>
          </view>
        </template>
      </u-navbar>
    </view>
  </u-sticky>
  <view class="com-wrap">
    <view class="content-wrap">
      <image class="logo" :src="d.goods && d.goods[0].abs_logo"></image>
      <view>
        <view class="name">
          {{d.name}}
        </view>
        <view class="code" >
          <tki-qrcode
              ref="qrcode"
              uni="px"
              :val="d.url"
              :size="130 * 2"
          />
        </view>
        <view class="server-wrap">
          <view v-if="d.manager_name">客户经理：{{d.manager_name}}</view>
          <view v-if="d.manager_phone">联系方式：{{d.manager_phone}}</view>
          <view>有效期至：{{d.end_time_txt}}</view>
        </view>
        <view class="long-tap" @click="onSave()">点击保存二维码</view>
        <view>
          <view class="copy-link" @click="onCopy(d.url)">复制链接</view>
        </view>
      </view>

    </view>
    <u-button :custom-style="{background:'#165DFF',color:'white'}" @click="onBackIndex">返回首页</u-button>
  </view>


</view>
</template>

<script>
import {apiChangeCodeStatus, apiCodeDelete, apiDeleteProduct, apiGetCodeDetail} from "../../api/dynamic_code.js";
import TkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";


export default {
  components: {TkiQrcode},

  data() {
    return {
      d: {}
    };
  },
  onLoad({id}) {
    this.init(id);
  },
  methods: {
    onBackIndex(){
      uni.redirectTo({
        url: '/yixu/pages/dynamic_code/index'
      });
    },
    async init(id) {
      const res = await apiGetCodeDetail({id});
      this.d = res.data;
      this.$nextTick(() => {
        this.$refs.qrcode._makeCode()
      })
    },
    onCopy(url){
      uni.setClipboardData({
        data: url,
        success: function () {
          console.log('复制成功');
        }
      });
    },
    back(){
      uni.navigateBack();
    },
    onSave(){
      this.$refs.qrcode._saveCode()
    }
  }
}
</script>

<style lang="scss" scoped>
.page-wrap {
  background-image: url("https://theme.lanbaozixun.com/lbzx/dynamic_code/bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y: -50rpx;
  height: 100vh;
  background-color: #F5F5F5;

  //background-color: white;
}

.sticky-bg {
  background: url("https://theme.lanbaozixun.com/lbzx/dynamic_code/bg.png");
  background-size: 100%;
}

.back-wrap {
  display: flex;
  align-items: center;
  padding-left: 30rpx;
  gap: 10rpx;

  image {
    width: 30rpx;
    height: 30rpx;
  }

  text {
    font-weight: bold;
  }
}

.com-wrap {
  padding: 40rpx 30rpx;
}

.content-wrap{
  margin-bottom: 80rpx;
  background-image: url("https://theme.lanbaozixun.com/lbzx/dynamic_code/qrcode_bg.png");
  background-size: 100%;
  background-repeat: no-repeat;
  min-height: 300px;
  position: relative;
  padding-top:180rpx;
  padding-bottom: 80rpx;
  border-radius:  0 0 40rpx 40rpx;
  overflow: hidden;
  text-align:center;
  .logo{
    width: 140rpx;
    height: 140rpx;
    position: absolute;
    top: 30rpx;
    left: calc(100% / 2 - 70rpx);
  }
  .name{
    color: rgba(45, 51, 74, 1);
    margin-top: 40rpx;
    font-size: 36rpx;

  }
  .code{

    margin-top: 40rpx;
    margin-bottom: 20rpx;
  }
  .server-wrap{
    text-align: center;
    line-height: 1.4;
    color: #486FDB;
    font-size: 24rpx;
    padding: 20rpx;

  }
  .long-tap{
    color: #666666;
  }
  .copy-link{
    background: #7E87E7;
    color: white;
    border-radius: 10rpx;
    padding: 10rpx 80rpx;
    display: inline-block;
    margin-top: 50rpx;
  }
}

</style>
